<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
</head>
<body>
    <!-- 
    路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，
    如果点击页面上的about 按钮，页面中就要显示about 的内容。
    Home按钮  => home 内容， about按钮 => about 内容，也可以说是一种映射. 
    所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 

    类似于链接：<a href="abc.html">我们要跳转的页面</a>

    在vue中使用路由一定要引用库

    路由的嵌套：在实际应用的界面中，通常由多层嵌套的组件组合而成。例如在首页中会嵌套登录以及注册
               这个时候URL：/home/login     /home/reg

    -->
    <div id="box">
        <p>
            <!-- 我们可以使用router-link组件来进行导航 -->
            <!-- 通过传入to属性指定链接 -->
            <!-- router-link 默认就会渲染成一个a标签 -->
            <router-link to="/home">home</router-link>
            <router-link to="/news">news</router-link>
        </p>
        <!-- 定义一个路由的出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
  </div>


    <template id="home">
        <!-- 注意：组件只能有一个根元素，所以我们可以包装到div中 -->
        <div>
            <h2>首页</h2>
            <router-link to="/home/login">登录</router-link>
            <router-link to="/home/reg">注册</router-link>
        </div>
        <!-- 路由所匹配的组件将会渲染到这里 -->
        <router-view></router-view>
    </template>

    <template id="news">
        <div>新闻</div>
    </template>

    <template id="login">
        <div>登录界面</div>
    </template>

    <template id="reg">
        <div>注册</div>
    </template>

    <script>
        //1.定义路由组件
        const Home = {template:'#home'}
        const News = {template:'#news'}
        const Login = {template:'#login'}
        const Reg = {template:'#reg'}



        //2.定义路由
        //每个路由应该映射为一个组件
        const routes = [
            {
                path:'/',redirect:'/home'
            },

            {
                //使用了嵌套路由
                path:'/home',
                component:Home,
                children:[
                    {
                        path:'/home/login',component:Login
                    },
                    {
                        path:'/home/reg',component:Reg
                    }
                ]
            },
            {
                path:'/news',component:News
            }

        ]

        //3.创建一个router的实例(对象)，然后将上面定义的路由routes进行配制
        const router = new VueRouter({
           routes //相当于routes:toutes
        })

        // 4.创建和挂载根实例
        // 我们要通过router配置参数注入路由，从而让整个应用都有路由的功能
        var demo = new Vue({
            el:"#box",
            data:{
               
            },
            //要将路由添加到vue中
            router
        })
    </script>
</body>
</html>